import React from 'react';
import {
  Box,
  Card,
  CardContent,
  Typography,
  Grid,
  Radio,
  FormControlLabel,
  RadioGroup,
} from '@mui/material';
import { Image, VideoFile } from '@mui/icons-material';
import { ContentType } from '../../../types';

interface ContentTypeSelectorProps {
  value: ContentType;
  onChange: (contentType: ContentType) => void;
}

const ContentTypeSelector: React.FC<ContentTypeSelectorProps> = ({
  value,
  onChange,
}) => {
  return (
    <Box>
      <Typography variant="h6" gutterBottom sx={{ mb: 3, textAlign: 'center' }}>
        选择要创建的内容类型
      </Typography>
      
      <RadioGroup
        value={value}
        onChange={(e) => onChange(e.target.value as ContentType)}
      >
        <Grid container spacing={3} justifyContent="center">
          {/* 图片内容 */}
          <Grid size={{ xs: 12, sm: 6, md: 5 }}>
            <Card 
              sx={{ 
                cursor: 'pointer',
                border: value === ContentType.IMAGE ? '2px solid #2196f3' : '2px solid transparent',
                '&:hover': {
                  boxShadow: 6,
                  transform: 'translateY(-2px)',
                },
                transition: 'all 0.3s ease',
              }}
              onClick={() => onChange(ContentType.IMAGE)}
            >
              <CardContent sx={{ textAlign: 'center', py: 4 }}>
                <Image 
                  sx={{ 
                    fontSize: 64, 
                    color: value === ContentType.IMAGE ? '#2196f3' : '#666',
                    mb: 2 
                  }} 
                />
                <Typography variant="h6" gutterBottom>
                  图片内容
                </Typography>
                <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
                  分享图片，展示美好时刻
                </Typography>
                <FormControlLabel
                  value={ContentType.IMAGE}
                  control={<Radio />}
                  label=""
                  sx={{ m: 0 }}
                />
              </CardContent>
            </Card>
          </Grid>

          {/* 视频内容 */}
          <Grid size={{ xs: 12, sm: 6, md: 5 }}>
            <Card 
              sx={{ 
                cursor: 'pointer',
                border: value === ContentType.VIDEO ? '2px solid #2196f3' : '2px solid transparent',
                '&:hover': {
                  boxShadow: 6,
                  transform: 'translateY(-2px)',
                },
                transition: 'all 0.3s ease',
              }}
              onClick={() => onChange(ContentType.VIDEO)}
            >
              <CardContent sx={{ textAlign: 'center', py: 4 }}>
                <VideoFile 
                  sx={{ 
                    fontSize: 64, 
                    color: value === ContentType.VIDEO ? '#2196f3' : '#666',
                    mb: 2 
                  }} 
                />
                <Typography variant="h6" gutterBottom>
                  视频内容
                </Typography>
                <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
                  上传视频，记录动态瞬间
                </Typography>
                <FormControlLabel
                  value={ContentType.VIDEO}
                  control={<Radio />}
                  label=""
                  sx={{ m: 0 }}
                />
              </CardContent>
            </Card>
          </Grid>
        </Grid>
      </RadioGroup>

      {/* 说明文字 */}
      <Box sx={{ mt: 4, textAlign: 'center' }}>
        <Typography variant="body2" color="text.secondary">
          {value === ContentType.IMAGE 
            ? '图片内容支持上传最多8张图片，支持JPG、PNG格式'
            : '视频内容支持上传单个视频文件，支持MP4、AVI、MOV格式'
          }
        </Typography>
      </Box>
    </Box>
  );
};

export default ContentTypeSelector; 